<template>
  <el-row>
    <el-col :span="18">

      <div ref="containerRef" style="height: calc(100vh - 84px); overflow-y: auto">
        <el-form :model="form" label-width="160" style="max-width: 720px; margin: 30px auto; ">
          <div>

            <!-- <el-image style="width: 80px; height: 30px; background-color: #eeeeee; border-radius: 4px;" :src="captcha">
              <template #error>
                <div class="image-slot"
                  style="height: 30px; align-items: center; display: flex; justify-content: center; color: #959595; font-size: 1.2rem;">
                  <el-icon>
                    <Picture />
                  </el-icon>
                </div>
              </template>
</el-image>

<el-button link @click="onChange">换一张</el-button> -->

          </div>
          <div id="install-part1" style="display: flex; margin-bottom: 20px;">
            <span style="width: 6px;margin: 8px 5px 5px 0; background-color: var(--el-color-danger-light-3);"></span>
            <label style="font-weight: 600;">基础配置</label>
          </div>
          <el-form-item label="安装目录" required>
            <el-input v-model="form.installDir" clearable />
          </el-form-item>

          <el-form-item label="访问地址" required>
            <el-input v-model="form.portal" placeholder="支持IPv4和域名，单机配置本机IPv4">
              <template #prepend>
                <el-select v-model="portal_protocol" style="width: 90px">
                  <el-option label="http://" value="http" />
                  <el-option label="https://" value="https" />
                </el-select>
              </template>
              <template #append>:8080/permission/login</template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="JAVA_HOME">
        <el-input v-model="form.java_home" clearable/>
      </el-form-item>
      <el-form-item label="ORACLE_HOME">
        <el-input v-model="form.oracle_home" clearable/>
      </el-form-item> -->
          <el-divider border-style="dashed" style="margin: 30px 0;" />
          <div id="install-part2" style="display: flex; margin: 20px 0;">
            <span style="width: 6px;margin: 8px 5px 5px 0; background-color: var(--el-color-success-light-3);"></span>
            <label style="font-weight: 600;">数据库配置</label>
          </div>
          <el-form-item label="数据库主机" required>
            <el-input v-model="form.dbhost" clearable placeholder="支持IPv4和域名"/>
          </el-form-item>
          <el-form-item label="数据库用户名" required>
            <el-input v-model="form.dbuser" clearable />
          </el-form-item>
          <el-form-item label="数据库密码" required>
            <el-input v-model="form.dbpass" clearable type="password" show-password />
          </el-form-item>
          <el-form-item label="数据库端口" required>
            <el-input v-model="form.dbport" clearable />
          </el-form-item>

          <el-divider border-style="dashed" style="margin: 30px 0;" />
          <div id="install-part3" style="display: flex; margin: 20px 0;">
            <span style="width: 6px;margin: 8px 5px 5px 0; background-color: var(--el-color-primary-light-3);"></span>
            <label style="font-weight: 600;">端口配置</label>
          </div>
          <el-alert title="端口无冲突时，不建议修改" type="info" show-icon style="margin-bottom: 20px;" />

          <el-form-item label="主服务端口" required>
            <el-input v-model="form.mainport" clearable />
          </el-form-item>
          <el-form-item label="工作服务端口" required>
            <el-input v-model="form.workport" clearable />
          </el-form-item>
          <el-form-item label="许可注册服务端口" required>
            <el-input v-model="form.regport" clearable />
          </el-form-item>
          <el-form-item label="高可用服务端口" required>
            <el-input v-model="form.haport" clearable />
          </el-form-item>
          <el-form-item label="大数据服务端口" required>
            <el-input v-model="form.kafport" clearable />
          </el-form-item>

          <el-divider border-style="dashed" style="margin: 30px 0;" />

          <div id="install-part4" style="display: flex; margin: 20px 0;">
            <span style="width: 6px;margin: 8px 5px 5px 0; background-color: var(--el-color-warning-light-3);"></span>
            <label style="font-weight: 600;">高可用配置</label>
          </div>

          <el-form-item label="启用平台高可用">
            <el-switch v-model="form.enablePlatformHA" />
          </el-form-item>

          <el-form-item label="节点1" required>
            <el-input v-model="form.ip1" clearable placeholder="节点1物理IPv4"/>
          </el-form-item>
          <el-form-item label="节点2" v-if="form.enablePlatformHA" required>
            <el-input v-model="form.ip2" clearable placeholder="节点2物理IPv4"/>
          </el-form-item>

          <el-form-item label="启用链路高可用">
            <el-switch v-model="form.enableTaskHA" />
          </el-form-item>
          <el-form-item label="Manager节点1" required>
            <el-input v-model="form.ip1" clearable placeholder="节点1物理IPv4"/>
          </el-form-item>
          <el-form-item label="Manager节点2" v-if="form.enableTaskHA" required>
            <el-input v-model="form.ip2" clearable placeholder="节点2物理IPv4"/>
          </el-form-item>

          <el-form-item label="Zookeeper集群" required>
            <el-input v-model="form.zknodes" clearable placeholder="examples: IP1:2181,IP2:2181,IP3:2181"/>
          </el-form-item>

          <el-divider border-style="dashed" style="margin: 30px 0;" />

          <div id="install-part5" style="display: flex; margin: 20px 0;">
            <span style="width: 6px;margin: 8px 5px 5px 0; background-color: var(--el-color-info-light-3);"></span>
            <label style="font-weight: 600;">其他配置</label>
          </div>

          <el-form-item label="定时同步">
            <el-switch v-model="form.optionTimer" />
          </el-form-item>
          <!-- <el-form-item label="定时同步">
            <el-switch v-model="form.delivery" />
          </el-form-item> -->
          <!-- <el-divider border-style="dashed" style="margin: 30px 0;" /> -->

          <el-form-item label="版本选择" style="margin-bottom: 30px;">
            <el-radio-group v-model="form.versionType">
              <el-radio value="Lite">精简版</el-radio>
              <el-radio value="Standard">标准版</el-radio>
              <el-radio value="Professional">专业版</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item> -->
          <!-- <el-divider border-style="dashed" style="margin: 30px 0;" /> -->
          <el-progress :percentage="100" :stroke-width="10" status="success" striped :show-text="false"
            :duration="10" />

          <el-form-item style="margin: 50px 0;">
            <el-button type="primary" @click="onSubmit" style="width: 160px; margin-left: 0px; ">安装</el-button>
          </el-form-item>
        </el-form>

      </div>

    </el-col>
    <el-col :span="6">
      <el-anchor :container="containerRef" direction="vertical" type="default" :offset="30" @click="handleClick">
        <el-anchor-link href="#install-part1" title="基础配置" />
        <el-anchor-link href="#install-part2" title="数据库配置" />
        <el-anchor-link href="#install-part3" title="端口配置" />
        <el-anchor-link href="#install-part4" title="高可用配置" />
        <el-anchor-link href="#install-part5" title="其他配置" />
      </el-anchor>
    </el-col>
  </el-row>

  
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

// do not use same name with ref
const form = reactive({
  installDir: '/data/dataxone',
  portal: '',
  dbhost: '',
  dbuser: 'dataxone',
  dbpass: '',
  dbport: '3306',
  mainport: '8080',
  workport: '8081',
  regport: '6000',
  haport: '9998',
  kafport: '8880',
  enablePlatformHA: false,
  enableTaskHA: true,
  ip1: '',
  ip2: '',
  zknodes: '',
  optionTimer: false,
  versionType: 'Standard'
});

const portal_protocol = ref('http');

// import JSEncrypt from 'jsencrypt'
// import axios from 'axios'

// const captcha = ref('');
// const centerDialogVisible = ref(false)
// const dialogContent = ref("")
// const dialogTitle = ref("Warning")

// const encryptor = new JSEncrypt();

// axios.get("/auth/prelude").then((rsp) => {
//   let data = rsp.data['data'];
//   captcha.value = data['captcha'];
//   update_session(data);

//   console.info(data['nonce'])
//   encryptor.setPublicKey(data['key']);
// }).catch(error => {
//   console.error(error);
// });

const onSubmit = () => {
//   let ins = axios.create({
//     headers: {
//       'Nonce': sessionStorage.getItem("nonce")
//     }
//   });
//   ins.post("/auth", { username: form.dbuser, password: encryptor.encrypt(form.dbpass), captcha: form.dbport }).then((rsp) => {
//     let data = rsp.data;
//     centerDialogVisible.value = true;
//     dialogContent.value = data['message'];
//     dialogTitle.value = data['code'];

//     data = data['data'];
//     if (data['captcha']) {
//       captcha.value = data['captcha'];
//     }

//     update_session(data);

//     // console.info(rsp);
//     // console.info(data['data']['authorization']);
//   }).catch(error => {
//     console.error(error);
//   });


}

// 更新session
// const update_session = (data: any) => {
//   let keys = ['nonce', 'access_token', 'refresh_token', 'key'];
//   for (let key of keys) {
//     if (data[key]) {
//       sessionStorage.setItem(key, data[key]);
//     }
//     //  else {
//     //   sessionStorage.removeItem(key);
//     // }
//   }
// }

// const onChange = () => {
//   axios.get("/auth/captcha").then((rsp) => {
//     update_session(rsp.data['data']);
//     captcha.value = rsp.data['data']['captcha'];
//   }).catch(error => {
//     console.error(error);
//   });
// }

const containerRef = ref<HTMLElement | null>(null);
const handleClick = (e: MouseEvent) => {
  e.preventDefault()
}


</script>